<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }
        .img-box {
            position: relative;
            width: 700px;
            height: 320px;
            margin: 50px auto 0;
            background-color: #000;
        }
        .img-box .bottom {
            display: flex;
            position: absolute;
            bottom: 0;
            left: 0;
            padding-left: 5px;
            width: 100%;
            height: 40px;
            background-color: gray;
            opacity: 0.7;
        }
        .img-box h3 {
            line-height: 40px;
            font-size: 14px;
            color: white;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="img-box">
        <img class="pic" src="" alt="">
        <div class="bottom">
            <h3></h3>
        </div> 
    </div>
    <script>
        const data = [
            {
                imgSrc: 'imgs/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: 'imgs/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: 'imgs/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: 'imgs/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: 'imgs/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: 'imgs/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: 'imgs/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: 'imgs/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: 'imgs/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]
        const h3 = document.querySelector('.img-box .bottom h3')
        const img = document.querySelector('.img-box img')
        let index = 0
        img.src = data[index].imgSrc
        h3.innerHTML = data[index].title
        setInterval(function(){
            index += 1
            if (index === data.length) {
                index = 0
            }
            img.src = data[index].imgSrc
            h3.innerHTML = data[index].title
        }, 1000)
    </script>
</body>
</html>